import React from "react"
import './Footer.css';
import { Image } from 'react-bootstrap';
import Gallary from './Gallary';

export default class Header extends React.Component {
  smartContract = () => {
    alert('building...')
  }

  render() {
    return (
      <div className='footer'>
        <div className='footer-social-content'>
          <a href="https://discord.gg/tqRnbAqZuY" target="_blank" rel="noopener noreferrer">
            <Image className='footer-social-icon' src="images/social/social_0.png" />
          </a>
          <Image className='footer-social-icon' src="images/social/social_1.png" />
          <a href="https://twitter.com/MissionZella" target="_blank" rel="noopener noreferrer">
            <Image className='footer-social-icon' src="images/social/social_2.png" />
          </a>
          <Image className='footer-social-icon' src="images/social/social_3.png" />
        </div>
        <div className='footer-btn'>
          <div className='button-block' onClick={() => { this.smartContract() }}>Smart Contract</div>
        </div>
        <Gallary />
      </div >
    );
  }
}
